			let li = $('.wrap > ul > li')
			let div = $('.right > div')
			$('.wrap > ul > li').click(function(){
				let index = $(this).index()
				$('.wrap > ul > li > a').removeClass('click')
				$('.wrap > ul > li').eq(index).children('a').addClass('click')
				for (var i = 0; i < div.length; i++) {
					if(i == index){
						div[i].style.display = ''
					}else{
						div[i].style.display = 'none'
					}
				}
			})
			// 进度条
			var range = $('#range')
			let card  = $('.card')
			var now = parseInt(range.val());
			
			$('.fast').click(function(){
				now = now + 5;
				range.val(now)
				b()
				
			})
			// 380 239
			// 
			$('.back').click(function(){
					now = now - 5;
					range.val(now)
					b()
			})
			// 280 176.5  580 365.70
			// 85.60 × 53.98 mm 1.586倍
			// 380 239
			function b(){
				let width  = card.width()
				let height = card.height()
				let left =  parseInt($('.card').css('left').substr(0,$('.card').css('left').indexOf('px')))
				let ba = $('.card').css('background-size')
				let img_left = parseInt(ba.substr(0,ba.indexOf('px')))
				let img_right = parseInt(ba.substr(ba.lastIndexOf(' ')+1, ba.lastIndexOf('px')).substr(0,ba.indexOf('px')))
				console.log(range.val())
				var width_add = 300
				var height_add = 189.2
				var width_present = range.val()/100*width_add+280
				var height_present = range.val()/100*height_add+176.5
				var left_present = 400 - 100*range.val()/100
				card.css({
					'width':width_present,
					'height':height_present,
					'left':left_present,
					'background-size':(width_present)+'px '+(height_present)+'px',
					})
				now = parseInt(range.val())
				if(now == 0){
					$('.back').hide()
				}else if(now == 100){
					$('.fast').hide()
				}else{
					$('.fast').show()
					$('.back').show()
				}
				
			}